const { src, dest, series, parallel, watch } = require("gulp");
const sass = require("gulp-sass");//使用sass
const concat = require("gulp-concat"); //把css合并到一个min.css中
const webpackStream = require("webpack-stream");//打包js
const rev = require("gulp-rev");//生成rev文件夹，重命名文件
const revCollector = require("gulp-rev-collector");//重命名的js文件名字同步到html文件

function copyHtml() {
    return src('./src/*.html')
        .pipe(dest('./dist/'))
}
function copyFonts() {
    return src('./src/style/fonts/*.*')
        .pipe(dest('./dist/style/fonts/'));
}
function copyLibs() {
    return src('./src/lib/*.js')
        .pipe(dest('./dist/js/lib/'))
}
function copyImages() {
    return src("./src/images/*.*")
        .pipe(dest("./dist/images/"))
}
function compileJs() {
    return webpackStream({
        mode: "production",
        entry: { app: './src/app.js', detail: './src/detail.js' },//入口文件，只要与app.js相关的都会被编译到app.min.js文件里面
        output: {
            filename: "[name].min.js",
        },
        module: {
            rules: [
                {
                    test: /\js$/,//匹配文件
                    exclude: /(node_modules)/,//需要排除的文件
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: ['@babel/plugin-transform-runtime']
                        }
                    }
                },
                {
                    test: /\.html$/,
                    loader: "string-loader"
                }
            ]
        }
    })
        .pipe(rev())
        .pipe(dest("./dist/js/"))
        .pipe(rev.manifest("js-manifest.json"))//指定输出的目录
        .pipe(dest("./rev/"));
    //生成配置文件放在rev文件夹，但是当前在index.html中引用js名字并没有发生变化
    //需要引入gulp-rev-collector 实现html页面引用同步的更新
}
function compileCss() {
    return src('./src/style/*.scss')
        .pipe(sass().on('error', sass.logError))
        // .pipe(concat("app.min.css"))
        .pipe(rev())
        .pipe(dest("./dist/style/"))
        .pipe(rev.manifest("css-mainfest.json"))//指定输出的目录
        .pipe(dest("./rev/"))
}
function revCol() {//引入gulp-rev-collector 实现html页面引用同步的更新
    return src(['./rev/*.json', './dist/*.html'])
        .pipe(revCollector({
            replaceReved: true,
        }))
        .pipe(dest("./dist/"));
}

exports.default = series(parallel(compileJs, copyHtml, copyFonts, copyLibs, copyImages, compileCss), revCol);